<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:jsf="http://xmlns.jcp.org/jsf"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">

    <head jsf:id="header"> 
        <title>Cronograma</title>
        <link rel="stylesheet" type="text/css" 
              href="#{request.contextPath}/resources/bootstrap/css/bootstrap.min.css" />

        <h:outputScript library="js" name="locale.min.js" />
        <style>
            body {
                padding-top: 70px;
                background-image: url("#{scheduleBean.image}");
                background-repeat: no-repeat;
                -webkit-background-size: cover; /* For WebKit*/
                -moz-background-size: cover;    /* Mozilla*/
                -o-background-size: cover;      /* Opera*/
                background-size: cover;         /* Generic*/
            }
            .navbar {
                height: 30px;
            }
            .ui-widget,.ui-widget .ui-widget {
                font-size: 75% !important;
            }
            .fc-event-inner .fc-event-time {
                display: none;
            }
            .fc-content * tbody{
                opacity:0.8;
            }
            .ui-widget, .ui-widget .ui-widget {
                font-size: 90%;
            }
            .public-event-curso, .public-event-curso .fc-event-skin, .public-event-curso a{
                font-size: 10px;
                background-color: #3A87AD; 
            }
            .public-event-evento, .public-event-evento .fc-event-skin, .public-event-evento a{
                font-size: 10px;
                background-color: #58bf5f; 
            }
            .public-event-sorteo, .public-event-sorteo .fc-event-skin, .public-event-sorteo a{
                font-size: 10px;
                background-color: #bf8458; 
            }
            .public-event-desabilitado, .public-event-desabilitado .fc-event-skin, .public-event-desabilitado a{
                font-size: 10px;
                background-color: red; 
            }
        </style>
    </head>
    <body jsf:id="bodyx">
        <div class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button class="navbar-toggle collapsed" data-target=".navbar-collapse" data-toggle="collapse" type="button" >
                        <span class="sr-only">Menú</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="index.jsf" target="_blank">Vista Común</a>
                </div>
                <h:form>
                    <div class="navbar-collapse collapse">
                        <ul class="nav navbar-nav">
                            <li class="active" style="padding-right: 3px;">
                                <a href="loged.jsf">Cronograma</a>
                            </li>
                            <li class="active" style="padding-right: 3px;">
                                <a href="image.jsf" >Programación Imagenes</a>
                            </li>
                            <li class="active">
                                <a href="plantilla.jsf" >Plantillas</a>
                            </li>
                        </ul>
                        <ul class="nav navbar-nav navbar-right" style="background: #E7E7E7;">
                            <li>
                                <p:commandLink ajax="false" id="asdasd"
                                               action="#{scheduleBean.logOut()}">Salir</p:commandLink>

                            </li>
                        </ul>
                    </div>
                </h:form>
            </div>
        </div>

        <div class="container">
            <div class="row" style="margin-left: 25px;">

                <div class="col-md-3">
                    <p style="color:#1472B3">
                        <img src="resources/img/blue.png" width="20px;" height="20px;"/>
                        Inicio de Clases 
                    </p>
                </div>
                <div class="col-md-3">
                    <p style="color:#58bf5f"> 
                        <img src="resources/img/green.png" width="20px;" height="20px;"/>
                        Eventos Gratuitos
                    </p>
                </div>
                <div class="col-md-3">
                    <p style="color:#bf8458"> 
                        <img src="resources/img/brown.png" width="20px;" height="20px;"/>
                        Sorteos
                    </p>
                </div>
                <div class="col-md-3">
                    <p style="color:red"> 
                        <img src="resources/img/red.jpg" width="20px;" height="20px;"/>
                        Inactivos
                    </p>
                </div>

            </div>
            
            <form jsf:id="userform">
                <p:messages id="msg" showDetail="true" closable="true" />
                <p:schedule id="schedule" widgetVar="myschedule" resizable="false" 
                            locale="es" rightHeaderTemplate="none" draggable="false"
                            value="#{scheduleBean.lazyEventModel}" >

                    <p:ajax event="dateSelect" listener="#{scheduleBean.onDateSelect}" 
                            oncomplete="PF('createSchedule').show()" update=":formue"/>  
                    <p:ajax event="eventSelect" listener="#{scheduleBean.onEventSelect}" 
                            oncomplete="PF('createSchedule').show()" update=":formue" />  
                    <!--
                    <p:ajax event="eventMove" listener="#{scheduleBean.onEventMove}" />  
                    -->

                </p:schedule>  

            </form>
        </div>

        <p:dialog appendTo="@(doby)" widgetVar="createSchedule" id="createScheduleId"
                  header="Programación de Curso" modal="true" closeOnEscape="true">
            <div class="container">

                <form jsf:id="formue">

                    <h:panelGrid columns="2" cellspacing="5" cellpadding="5"> 
                        <h:panelGrid columns="1">

                            <h:outputText value="Nombre Del Curso: " />
                            <h:inputText value="#{scheduleBean.schedule.name}" 
                                         required="true" size="60" style="font-weight:bold;background: #db5e5e;"/>

                            <h:outputText value="Fecha Seleccionada: " />

                            <p:calendar value="#{scheduleBean.schedule.dayActive}" locale="es"
                                        showButtonPanel="true" navigator="true" pattern="dd/MM/yyyy">
                            </p:calendar>
                        </h:panelGrid>
                        <h:panelGrid columns="2" cellspacing="5" cellpadding="5" style="margin-left: 15px;">
                            <h:outputText value="Tipo: " style="padding-right: 15px;" />
                            <h:outputText value="Estado: " style="padding-right: 15px;" />
                            <h:selectOneMenu id="stateidx" value="#{scheduleBean.schedule.type}">
                                <f:selectItem itemLabel="INICIO DE CURSO" itemValue="INICIO DE CURSO" />
                                <f:selectItem itemLabel="EVENTO GRATUITO" itemValue="EVENTO GRATUITO" />
                                <f:selectItem itemLabel="SORTEO" itemValue="SORTEO" />
                            </h:selectOneMenu>
                            <h:selectOneMenu id="stateid" value="#{scheduleBean.schedule.state}">
                                <f:selectItem itemLabel="ACTIVO" itemValue="ACTIVO" />
                                <f:selectItem itemLabel="INACTIVO" itemValue="INACTIVO" />
                            </h:selectOneMenu>
                            <h:panelGrid columns="1">
                                <h:outputText value="Plantilla: " style="padding-right: 15px;" />
                                <p:selectOneMenu id="stateidxs" value="#{scheduleBean.htmlDescriptId}">
                                    <f:selectItem itemLabel="NINGUNA" itemValue="0"/>
                                    <f:selectItems value="#{scheduleBean.listTemplate}"
                                                   var="template"
                                                   itemLabel="#{template.name}" itemValue="#{template.id}" />
                                    <p:ajax event="change" update="editor" listener="#{scheduleBean.updateViewHTML}"/>
                                </p:selectOneMenu>
                            </h:panelGrid>
                        </h:panelGrid>
                    </h:panelGrid>
                    <div class="form-group">
                        <label for="editor">Detalle</label>
                        <p:editor id="editor" required="true" requiredMessage="Falta Descripción"
                                  value="#{scheduleBean.schedule.descriptionHtml}" />
                    </div>

                    <button type="Submit" 
                            class="btn btn-default btn-primary" 
                            jsf:action="#{scheduleBean.saveOrUpdateSchedule()}">
                        Guardar
                    </button>

                    <button type="Submit" jsf:rendered="#{scheduleBean.schedule.id != null}"
                            class="btn btn-primary btn-primary" style="margin-left: 50px;"
                            jsf:action="#{scheduleBean.replicateSchedule()}">
                        Replicar
                    </button>
                    
                    <button type="Submit" jsf:rendered="#{scheduleBean.schedule.id != null}"
                            class="btn btn-danger btn-primary" style="margin-left: 50px;"
                            jsf:action="#{scheduleBean.removeSchedule()}">
                        Eliminar
                    </button>


                </form>

            </div>
        </p:dialog>
        <script src="resources/bootstrap/js/bootstrap.min.js" />

    </body>

</html>
